<template>
    <div>
        <el-dialog v-model="props.visible" title="选择取版内容" width="100%" @close="handleCancel">
            <el-form :model="queryParams" class="flex-box" ref="queryRef" :inline="true">
                <div>
                    <el-form-item label="生产单编码" prop="produceNo">
                        <el-input
                            v-model.trim="queryParams.produceNo"
                            placeholder="请输入生产单编码"
                            @keyup.enter="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">
                            搜索
                        </el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </div>
                <el-button type="primary" plain @click="handleSubmit" :disabled="multiple">
                    确认
                </el-button>
            </el-form>

            <el-row :gutter="20" style="overflow: auto">
                <!-- <div
                    class="card"
                    v-if="orderList.length > 0"
                    v-for="item in orderList"
                    :key="item.produceNo"
                >
                    <h3 class="card__title">生产单编码: {{ item.produceNo }}</h3>
                    <div class="card__content">出版编码: {{ item.pubNo }}</div>
                    <div class="card__date">交货日期: {{ item.deliverDate }}</div>
                    <div class="card__arrow">{{ item.type == 1 ? '封面' : '内文' }}</div>
                </div>
                <div v-else style="text-align: center">暂无数据</div> -->
                <el-col :span="8">
                    <el-table
                        v-loading="loading"
                        :data="orderList"
                        stripe
                        border
                        style="cursor: pointer"
                        @row-click="handleClick"
                        row-key="produceId"
                        @selection-change="handleSelectionChange"
                        ref="orderListTable"
                        highlight-current-row
                    >
                        <el-table-column type="selection" :reserve-selection="true" width="55" />
                        <el-table-column
                            label="生产单编码"
                            align="center"
                            
                            prop="produceNo"
                        ></el-table-column>
                        <el-table-column
                            label="出版编码"
                            align="center"
                            
                            prop="pubNo"
                        ></el-table-column>
                        <el-table-column
                            label="类型"
                            align="center"
                            
                            prop="type"
                        >
                            <template v-slot="{ row }">
                                <el-tag :type="row.type == 1 ? 'success' : ''" effect="dark">
                                    {{ row.type == 1 ? '封面' : '内文' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="16">
                    <el-table
                        ref="orderRef"
                        v-loading="loadingInfo"
                        :data="printList"
                        row-key="paperid"
                        stripe
                        border
                        style="cursor: pointer"
                    >
                        <el-table-column label="序号" width="55" type="index" align="center" />
                        <el-table-column
                            label="印刷序列号"
                            min-width="120"
                            prop="printProduceNo"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="品种" prop="breed" min-width="160" align="center">
                            <!-- <template #default="scope">
                                <dict-tag
                                    :options="ems_order_breed_type"
                                    :value="scope.row.breed"
                                />
                            </template> -->
                        </el-table-column>
                        <el-table-column
                            label="组成"
                            min-width="160"
                            prop="composition"
                            align="center"
                        >
                            <!-- <template #default="scope">
                                <dict-tag
                                    :options="ems_order_make_up"
                                    :value="scope.row.composition"
                                />
                            </template> -->
                        </el-table-column>
                        <el-table-column
                            label="印数"
                            width="120"
                            prop="printAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column label="印色" width="120" prop="printColour" align="center">
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_order_print_color"
                                    :value="scope.row.printColour"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="版材数量"
                            width="120"
                            prop="sheetAmount"
                            align="center"
                        ></el-table-column>
                        <el-table-column
                            label="版材尺寸"
                            prop="sheetSize"
                            width="120"
                            align="center"
                        >
                            <template #default="scope">
                                <dict-tag
                                    :options="ems_machine_info_size"
                                    :value="scope.row.sheetSize"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <div class="footer">
                <pagination
                    v-show="total > 0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { getProduceOrderList, taskMachine, getProduceById } from '@/api/production/cover'
const emit = defineEmits(['changeUpdate', 'cancel'])
const { proxy } = getCurrentInstance()
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { ems_machine_info_size, ems_order_make_up, ems_order_print_color, ems_order_breed_type } =
    proxy.useDict(
        'ems_order_breed_type',
        'ems_machine_info_size',
        'ems_order_make_up',
        'ems_order_print_color'
    )

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    orderSelectList: {
        type: Array,
        default: () => {
            ;[]
        },
    },
})
const selectList = ref([])
const orderRef = ref(null)
const orderList = ref([])
const printList = ref([])
const multiple = ref(true)
const selectRow = ref([])
const loading = ref(false)
const loadingInfo = ref(false)
const orderListTable = ref(null)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    //   status: 4,
})
watch(
    () => props.visible,
    val => {
        if (val) {
            handleQuery()
            nextTick(() => {
                orderListTable.value.clearSelection()
                if (props.orderSelectList.length > 0) {
                    props.orderSelectList.forEach(item => {
                        orderListTable.value.toggleRowSelection(item, true)
                    })
                }
            })
        }
    }
)
const total = ref(0)
const printColorToLable = (row) => {
  const resp = ems_order_print_color.value.filter((item) => item.value == row);
  return eval(resp[0].label);
};
// 选中订单
const handleClick = row => {
    loadingInfo.value = true;
  // makeStatus 1做版，2制版，3取板
  getProduceById({ pid: row.produceId }).then((res) => {
    res.data.producePrintList.forEach((item) => {
      item.sheetAmount =
        (item.printColour ? printColorToLable(item.printColour) : 0) *
        Math.ceil(Number(item.sheet || 0));
      item.produceNo = res.data.produceNo;
      item.producePrintId = item.printId;
      item.createTime = undefined;
      res.data.produceProductList.forEach((ele) => {
        if (item.orderProductId == ele.orderProductId) {
          item.breed = ele.breedType;
          item.bookName = ele.bookName;
          item.orderNo = ele.orderNo;
        }
      });
    });
    printList.value = res.data.producePrintList;
    loadingInfo.value = false;
  });
}

// 选中
const handleSelectionChange = row => {
    selectRow.value = row
    multiple.value = !row.length
}
// const handleSubmit = () => {
//     selectRow.value.forEach(each => {
//         let list = []
//         getProduceById({ pid: each.produceId }).then(res => {
//             res.data.producePrintList.forEach(item => {
//                 item.produceNo = res.data.produceNo
//                 item.producePrintId = item.printId
//                 item.createTime = undefined
//                 res.data.produceProductList.forEach(ele => {
//                     if (item.orderProductId == ele.orderProductId) {
//                         item.breed = ele.breedType
//                         item.bookName = ele.bookName
//                         item.orderNo = ele.orderNo
//                     }
//                 })
//             })
//             let array1 = res.data.producePrintList.filter(item => item.makeStatus == 2)
//             list = [...list, ...array1]
//             loadingInfo.value = false
//         })
//     })
//     emit('changeUpdate', list)
// }
const handleSubmit = async () => {
    const resultList = [];
  // 使用 Promise.all() 等待所有请求完成后再进行下一步操作
  await Promise.all(
    selectRow.value.map(async (each) => {
      const res = await getProduceById({ pid: each.produceId });
      const list = [];
      res.data.producePrintList.forEach((item) => {
        item.produceNo = res.data.produceNo;
        item.producePrintId = item.printId;
        item.createTime = undefined;
        res.data.produceProductList.forEach((ele) => {
          if (item.orderProductId == ele.orderProductId) {
            item.breed = ele.breedType;
            item.bookName = ele.bookName;
            item.orderNo = ele.orderNo;
          }
        });
      });
      // 将满足条件的项加入 list 中
      const array1 = res.data.producePrintList;
      list.push(...array1);
      // 将 list 加入到 resultList 中
      resultList.push(...list);
    })
  );
  // 关闭 loading
  loadingInfo.value = false;
  // 触发 changeUpdate 事件，并传递 resultList
  emit("changeUpdate", resultList);
}

const handleCancel = () => {
    orderList.value = [];
  printList.value = [];
    proxy.resetForm('queryRef')
    emit('cancel')
}
const getList = async () => {
    loading.value = true
    queryParams.value.machineId = userStore.workbranchId
  try {
    const res = await taskMachine(queryParams.value)
    if (res.rows.length > 0) {
        orderListTable.value.setCurrentRow(res.rows[0])
    }
    loading.value = false
    orderList.value =  res.rows
    if (orderList.value.length > 0) {
      handleClick(orderList.value[0]);
    } else {
      printList.value = [];
    }
    
    total.value = res.total
  } catch (error) {
    loading.value = false
  }
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm('queryRef')
    handleQuery()
}

// getList()
</script>

<style lang="scss" scoped>
.card {
    margin-top: 10px;
    --border-radius: 0.75rem;
    --primary-color: #7257fa;
    --secondary-color: #3c3852;
    width: 100%;
    font-family: 'Arial';
    padding: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    background: #f4f4f8;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
    position: relative;
}

.card > * + * {
    margin-top: 1.1em;
}

.card .card__content {
    color: var(--secondary-color);
    font-size: 16px;
}

.card .card__title {
    padding: 0;
    font-size: 18px;
    font-weight: bold;
}

.card .card__date {
    color: #6e6b80;
    font-size: 0.8rem;
}

.card .card__arrow {
    color: #fff;
    position: absolute;
    background: var(--primary-color);
    padding: 0.4rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    bottom: 0;
    right: 0;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card svg {
    transition: 0.2s;
}

/* hover */
.card:hover .card__title {
    color: var(--primary-color);
    text-decoration: underline;
}

.card:hover .card__arrow {
    background: #70e786;
}

.card:hover .card__arrow svg {
    transform: translateX(3px);
}
</style>
